<template>
  <KrdPage>
    <view class="qualification-list">
      <view class="qualification-item" v-for="(item, index) in qualifications" :key="index">
        <image :src="item.image" class="qualification-image" mode="widthFix" />
        <text class="qualification-name">{{ item.name }}</text>
      </view>
    </view>
  </KrdPage>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import KrdPage from '@/components/KrdPage.vue'

const qualifications = ref([
  {
    image: '/static/cert1.jpg',
    name: 'ISO9001质量管理体系认证'
  },
  {
    image: '/static/cert2.jpg',
    name: '环境工程专项设计资质'
  },
  {
    image: '/static/cert3.jpg',
    name: '安全生产许可证'
  },
  {
    image: '/static/cert4.jpg',
    name: '高新技术企业证书'
  }
])
</script>

<style>
.qualification-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.qualification-item {
  width: 48%;
  display: flex;
  flex-direction: column;
  margin-bottom: 40rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.qualification-image {
  width: 100%;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.qualification-name {
  font-size: 28rpx;
  text-align: center;
}
</style>